<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        margin: 100px auto;
        width: 500px;
    }
    input{
        height: 30px;
        /*首行缩进*/
        text-indent: 15px;
        border: 1px solid #8bc58b;
        /*外边框 轮廓*/
        outline: none;
    }
    span{
        display: inline-block;
        width: 200px;height: 30px;
        line-height: 30px;
        /*垂直方向对齐方式*/
        vertical-align: middle;
        text-indent: 14px;
    }
    span.wrong{
        display: inline-block;
        border: 1px solid #f9b098;
        color: #ff2f66;
        background: #ffdcd0 url() no-repeat left;
    }
    span.right{
        display: inline-block;
        border: 1px solid #c9ddc9;
        color: #189189;
        background: #dfffdf url() no-repeat left;
    }
</style>
<body>
    <div>
        <label for="score">wed：</label>
        <input type="text" id="score" placeholder="请输入高数成绩">
        <span></span>
    </div>
</body>
<script>
  window.onload = function(){
     var inputs = document.querySelector("input");
     var spa = document.querySelector("span");
     //失去焦点
     inputs.onblur = function(){
         // input 的value属性 可以获取到 输入框里面的值
         //在这里this指的是事件的调用者
        var val = this.value;
        if(val==''){
            // var txt = document.createTextNode("分数不能为空");
            //spa.append(txt);
            spa.className="wrong";
            spa.innerText='分数不能为空';
            return
        }
        //判断参数是不是一个数  如果不是number 返回true  是number 返回fasel
        if(isNaN(val)){
            spa.className="wrong";
            spa.innerText='请输入数字';
            return
        }
        //只要是input框里面获取的值都是string类型  需要转换为number
        if(Number(val)>150 || Number(val)<0){
            spa.className="wrong";
            spa.innerText='成绩范围0~150';
            return
        }
         spa.className="right";
         spa.innerText='数据正确';
     }
  }
</script>
</html>